<template>
  <view>
    <view class="navbar">
        <image :src="BigIma" class="nav_img"></image>
    </view>
    <view class="Title">
      ·创造中心·
    </view>
    <view class="cangpi" v-for="(item,index) in gerenList" :key='index'>
          <image :src="item.photos" class="cang_img"></image>
          <!-- <view class="cang_name">{{item.name}}</view> -->
    </view>
    <view  class="Title">
      ·站内消息·
    </view>
    <view class="zhannei" v-for="(item,index) in kongList" :key='index' @click="ToMessage(index)">
          <image :src="item.photos" class="zhan_img"></image>
          <!-- <view class="zhan_name">{{item.name}}</view> -->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 海报
        BigIma:[],
        // 个人空间装饰
        gerenList:[],
        // 浏览空间基站
        kongList:[]
      };
    },
    onLoad() {
      this.getAll()
    },
    methods: {
      async getAll() {
        const {data:res } = await uni.$http.get('/spirit/select')
        console.log(res);
        if(res.code !== 200) {
          console.log("错误");
        }
        // this.cangList = res.data
        res.data.forEach( (item, index)=> {
            if (index % 2 ==0) {
                this.gerenList.push(item)
            } else {
                this.kongList.push(item)
            }
        })
        this.gerenList.forEach( (item, index)=> {
            if (index == 0) {
                this.BigIma = item.photos
                this.gerenList.splice(index, 1)
            }
        })
      },
     ToMessage(val) {
       if(val == 2) {
         uni.navigateTo({
           url: '/subpkg/userMessage/userMessage'
         })
       }
     }
    }
  }
</script>

<style lang="scss">
  .navbar {
    width: 100%;
    height: 400rpx;
    .nav_img {
      width: 100%;
      height: 100%;
    }
  }
.Title {
  text-align: center;
  color: white;
  font-size: 30rpx;
  font-weight: 600;
}
.cangpi {
   display: inline-block;
   width: 45%;
   height: 300rpx;
   margin: 50rpx 0;
   margin-left: 25rpx;
   border-radius: 10px;
   overflow: hidden;
   position: relative;
   .cang_img {
     width: 100%;
     height: 100%;
   }
   .cang_name {
     position: absolute;
     top:40%;
     left: 30%;
   }
}
.zhannei {
  display: inline-block;
   // justify-content: space-around;
   // background-color: aqua;
   width: 30%;
   height: 150rpx;
   margin: 20px 6px;
   position: relative;
   .zhan_img {
     width: 100%;
     height: 100%;
   }
   .zhan_name {
     position: absolute;
     top:30%;
     left: 30%;
   }
}
</style>
